<template>
  <div class='kva-container'>
    <div class='kva-contentbox'>
      <home-page-header>
        <div class='kva-form-search'>
          <el-form :inline='true' :model='queryParams'>
            <el-form-item label='房间：' >
              <el-select v-model='queryParams.room_id' class='m-2' placeholder='请选择房间' size='large' clearable>
                <el-option
                  v-for='item in roomOptions'
                  :key='item.value'
                  :label='item.room_name'
                  :value='item.room_id'
                />
              </el-select>
            </el-form-item>
            <el-form-item label='状态：'>
              <el-select v-model='queryParams.status' class='m-2' placeholder='请选择状态' size='large' clearable>
                <el-option
                  v-for='item in statusOptions'
                  :key='item.label'
                  :label='item.label'
                  :value='item.label'
                />
              </el-select>
            </el-form-item>
            <el-form-item label='时间：'>
              <el-date-picker
                v-model='queryParams.range'
                type='daterange'
                range-separator='至'
                start-placeholder='起始'
                end-placeholder='结束'
                size='large'
              />
            </el-form-item>
            <el-form-item label='人员：'>
              <el-select v-model='queryParams.reporter_id' class='m-2' placeholder='请选择状态' size='large' clearable>
                <el-option
                  v-for='item in userOptions'
                  :key='item.reporter_id'
                  :label='item.name'
                  :value='item.reporter_id'
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type='primary' icon='Search' @click.prevent='handleSearch'>搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data='tableData'
          :height='settings.tableHeight()'>

          <el-table-column label='房间名称' align='center'>
            <template #default='scope'>
              {{ scope.row.room.room_name }}
            </template>
          </el-table-column>
          <el-table-column label='房间类型' align='center'>
            <template #default='scope'>
              {{ scope.row.room.room_type == 1 ? '进线房' : scope.row.room.room_type == 2 ? '机房' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop='status' label='状态' align='center' />

          <el-table-column label='巡检人' align='center'>
            <template #default='scope'>
              {{ scope.row.reporter.name }}
            </template>
          </el-table-column>
<!--          <el-table-column prop='name' label='巡检人' align='center' />-->
<!--          <el-table-column prop='created_at' label='巡检时间' align='center' />-->
          <el-table-column fixed='right' align='center' label='操作' width='560'>
            <template #default='{row,$index}'>
              <el-button text icon='edit' @click='handleEdit(row)' type='primary'>详情</el-button>
              <el-button text icon='remove' @click='handleDel(row)' type='danger'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class='kva-pagination-box'>
          <el-pagination
            v-model:current-page='queryParams.page'
            v-model:page-size='queryParams.pageSize'
            :page-sizes='[10,20,30,50,100, 200]'
            small
            layout='total, sizes, prev, pager, next, jumper'
            :total='total'
            @size-change='handleSizeChange'
            @current-change='handleCurrentChange'
          />
        </div>
      </home-page-header>
    </div>
    <!--添加和修改系统角色-->
    <add-room ref='addRef' @load='handleLoadData'></add-room>
  </div>
</template>

<script setup>
import KVA from '@/utils/kva.js'
import settings from '@/settings'
import { formatTimeToStr } from '@/utils/date'
import {geCordtList, userList, list, DelById } from '@/api/report.js'
import AddRoom from '@/views/room/components/AddRoom.vue'


// 添加房间ref
const addRef = ref(null)
// 添加
const handleAdd = () => {
  addRef.value.handleOpen()
}
// 编辑
const handleEdit = async (row) => {
  // 在打开,再查询，
  addRef.value.handleOpen(row.room_id)
}

// 搜索属性定义
const queryParams = reactive({
  page: 1,
  pageSize: 10,
  keyword: ''
})

// 数据容器
const tableData = ref([])
const total = ref(0)
const roomOptions = ref([])
const statusOptions = ref([{
  label: '正常'
}, {
  label: '异常'
}, {
  label: '故障'
}])
const userOptions = ref([])


// 搜索
const handleSearch = () => {
  queryParams.page = 1
  queryParams.total = 0
  queryParams.pageSize = 10
  if(!queryParams.room_id){
    delete queryParams.room_id
  }
  if(!queryParams.reporter_id){
    delete queryParams.reporter_id
  }
  handleLoadData3()
}

// 查询房间列表
const handleLoadData = async () => {
  const resp = await list()
  roomOptions.value = resp.data
}
// 查询用户列表
const handleLoadData2 = async () => {
  const resp = await userList()
 userOptions.value = resp.data
}
//查记录
const handleLoadData3 = async () => {
  const resp = await geCordtList(queryParams)
  console.log("sss",resp)
  tableData.value = resp.data.list;
  total.value = resp.data.total
  queryParams.page = resp.data.page
}

// 改变分页Size
const handleSizeChange = (psize) => {
  queryParams.page = 1
  queryParams.pageSize = psize
  handleLoadData3()
}

// 改变分页PageNo
const handleCurrentChange = (pno) => {
  queryParams.page = pno
  handleLoadData3()
}

// 删除单个
const handleDel = async (row) => {
  await KVA.confirm('警告', '你确定要抛弃我么？', { icon: 'error' })
  await DelById(row.room_id)
  KVA.notifySuccess('删除成功')
  handleLoadData()
}


// 生命周期加载
onMounted(() => {
  handleLoadData()
  handleLoadData2()
  handleLoadData3()

})


</script>


